// http://ionicframework.com/docs/v2/theming/


// App Global Sass
// --------------------------------------------------
// Put style rules here that you want to apply globally. These
// styles are for the entire app and not just one component.
// Additionally, this file can be also used as an entry point
// to import other Sass files to be included in the output CSS.
//
// Shared Sass variables, which can be used to adjust Ionic's
// default Sass variables, belong in "theme/variables.scss".
//
// To declare rules for a specific mode, create a child rule
// for the .md, .ios, or .wp mode classes. The mode class is
// automatically applied to the <body> element in the app.

.reference, .short-reference, .image-text {
	display:none;
}

.focus {
	background-color: yellow;
}

ogl-html-embed {
	.body-block {
		p {
			margin-top: 0;
			margin-bottom: 0;
			.verse-number {
				font-weight: bold;
			}
		}

		.focus + p {
			padding-top: 1em;
		}

		p + :not(.focus),
		:not(.focus):first-child {
			padding-bottom: 1em;
		}

		.ref_id {
			font-weight: bold;
			margin-right: .6em;
		}

		figure {
			width: 100%;
			position: relative;
			> a {
				width: 100%;
				display: block;
				margin-left: -40px;
			}
			img {
				width: 100%;
			}
		}
	}
	> .paragraphs {
		.body-block {
			.verse {
				display: inline;
				.verse-number {
					display: none;
				}
				.para-mark {
					visibility: hidden;
					display: block;
				}
			}
		}
	}
}

.progress-bg {
	background-color: #e3f2fd;
	height: .2em;
	width: 100%;
	position: relative;
	padding: .2em;
	margin-bottom: 1em;
	> .progress-fg {
		height: .2em;
		background-color:  #2196f3;
	}
}
